<template>
  <div class="tip" :style="{bottom: (bottom/54)+'rem', left: (left/54)+'rem', position: absolute ? 'absolute' : 'unset'}">
    <div class="flex items-center">
      <img class="h-16px" src="@/assets/icons/desktop/tooltip_left.svg" alt="" />
      <div class="tip-content" :style="{width: width ? (width/54)+'rem' : 'max-content'}">
        <slot></slot>
      </div>
      <img class="transform rotate-180 h-16px" src="@/assets/icons/desktop/tooltip_left.svg" alt="" />
    </div>
    <div v-if="hasLine">
      <img class="h-40px mt-6px block" src="@/assets/icons/desktop/tooltip_bottom.svg" alt="" />
    </div>
  </div>
</template>

<script setup lang="ts">
  interface IProps {
    bottom?: number
    left?: number
    width?: number
    hasLine?: boolean
    absolute?: boolean
  }
  withDefaults(defineProps<IProps>(), {
    bottom: 100,
    left: 100,
    width: 0,
    hasLine: false,
    absolute: true,
  });
</script>

<style lang="scss" scoped>
.tip {
  color: #fff;
  &-content {
    padding: 4px 8px;
    background: linear-gradient(129.29deg, rgba(159, 228, 243, 0.9) 21.07%, rgba(66, 101, 132, 0.6) 80.63%);
    backdrop-filter: blur(10px);
    border-radius: 4px;
    border: 1px solid #C6DCF0;
    margin: 0 4px;
    font-size: 10px;
    line-height: 14px;
    word-break: break-all;
  }
}
</style>

